<template>
  <div :class="{ 'ly-is-full': isFull }">
    <div class="tableSelect" ref="tableSelect">
      <el-form :inline="true" :model="formInline" label-position="left">
        <el-form-item label="名称：">
          <el-input
            v-model.trim="formInline.user_name"
            maxlength="60"
            clearable
            placeholder="管理员名称"
            @change="search"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="上课日期段：">
          <el-date-picker
            v-model.trim="formInline.hetimeall"
            type="daterange"
            range-separator="-"
            start-placeholder="上课时间开始"
            end-placeholder="上课时间结束"
            value-format="YYYY-MM-DD" 
          />
        </el-form-item>
        <el-form-item label=""
          ><el-button @click="search" type="primary" icon="Search"
            >查询</el-button
          ></el-form-item
        >

        <el-form-item label=""
          ><el-button @click="handleEdit('', 'reset')" icon="Refresh"
            >重置</el-button
          ></el-form-item
        >
      </el-form>
    </div>

    <div class="table">
      <el-table
        :height="tableHeight"
        border
        :data="tableData"
        v-loading="loadingPage"
        style="width: 100%"
        ref="tableref"
        @selection-change="handleSelectionChange"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <!--                <el-table-column type="selection" width="55"></el-table-column>-->
        <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
        <el-table-column type="index" width="60" align="center" label="序号">
          <template #default="scope">
            <span v-text="getIndex(scope.$index)"></span>
          </template>
        </el-table-column>
        <el-table-column
          min-width="100"
          prop="username"
          label="名称"
        ></el-table-column>

        <el-table-column
          min-width="150"
          prop="mobile"
          label="电话号码"
        ></el-table-column>
        <el-table-column
          min-width="150"
          prop="dukestauts"
          label="督课数量"
        ></el-table-column>

        <el-table-column
          min-width="150"
          prop="daiketauts"
          label="代课数量"
        ></el-table-column>
      </el-table>
    </div>
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
  </div>
</template>
  <script>
import Pagination from "@/components/Pagination.vue";
import { dateFormats } from "@/utils/util";
import { zxWork } from "@/api/api"; 
import { setStorage, getStorage } from "@/utils/util";
import { ElMessage, ElMessageBox } from "element-plus";

import XEUtils from "xe-utils";
import { lyMixins } from "@/mixins/mixins";
import dayjs from "dayjs";
export default {
  mixins: [lyMixins],
  components: {
    Pagination,
  },
  name: "adminManage",
  data() {
    return {
      isFull: false,
      loadingPage: false,
      // 选项框选中数组
      ids: [],

      // 选项框非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      formInline: {
        page: 1,
        page: 1,
        per_page: 10,
      },
      pageparm: {
        page: 1,
        per_page: 10,
        total: 0,
      },
      statusList: [
        { id: 1, name: "正常" },
        { id: 0, name: "禁用" },
      ],
      timers: [],
      tableData: [],
      selectData: [],
      GroupList: [], //管理员分组列表
    };
  },
  methods: {
    authority(groupArr = [0]) {
      // 权限筛选
      let userInfo = this.userInfo;
      // 当前权限和传来的权限组进行对比
      if (groupArr.some((item) => Number(item) === userInfo)) return true;
      return false;
    },
    formatDateTime(time) {
      return dayjs.unix(time).format("YYYY-MM-DD HH:mm");
    },
    refreshData(x) {
      // 新增成功 搜索归0
      if (x) this.handleEdit("", "reset");
      else this.getData();
    },
    setFull() {
      this.isFull = !this.isFull;
      window.dispatchEvent(new Event("resize"));
    },
    // 表格序列号
    getIndex($index) {
      // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1
      return (this.pageparm.page - 1) * this.pageparm.per_page + $index + 1;
    },
    //多选项框被选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 批量删除按钮操作 */
    handleDelete(row) {
      const ids = this.ids;
      let vm = this;
      vm.$confirm("是否确认删除选中的数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        return regionDel({ id: ids }).then((res) => {
          if (res.code == 1) {
            ElMessage.success(res.msg);
            vm.search();
          } else {
            ElMessage.warning(res.msg);
          }
        });
      });
    },
    changeStatus(row) {
      console.log(row, "row----");
    },
    addModule() {
      console.log(this.GroupList, "---------新增出发");
      this.$refs.addModuleFlag.addModuleFn(null, "新增", this.GroupList);
    },
    handleEdit(row, flag) {
      this.formInline = {
        page: 1,
        per_page: 10,
      };
      this.pageparm = {
        page: 1,
        per_page: 10,
        total: 0,
      };
      this.getData();
    },

    callFather(parm) {
      this.formInline.page = parm.page;
      this.formInline.per_page = parm.per_page;
      this.getData();
    },
    search() {
      this.formInline.page = 1;
      this.formInline.per_page = 10;
      this.getData();
    },
    //获取列表
    async getData() {
      this.loadingPage = true;
      zxWork(this.formInline).then((res) => {
        this.loadingPage = false;
        if (res.code == 1) { 
          this.tableData = res.data.zxguser.data;
        //   // // 将列表数据转换为树形数据
        //   // this.tableData = XEUtils.toArrayTree(res.data.data, { parentKey: 'parent', strict: false })
          this.pageparm.page = res.data.zxguser.current_page;
          this.pageparm.per_page = res.data.zxguser.per_page;
          this.pageparm.total = res.data.zxguser.total; 
        }
      });
    },

    timeChange(val) {
      if (val) {
        this.formInline.beginAt = dateFormats(val[0], "yyyy-MM-dd hh:mm:ss");
        this.formInline.endAt = dateFormats(val[1], "yyyy-MM-dd hh:mm:ss");
      } else {
        this.formInline.beginAt = null;
        this.formInline.endAt = null;
      }
      this.search();
    },
  },
  created() {
    this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限

    // 数据获取
    this.getData();
  },
};
</script>
  